import React, { useState, useMemo, useEffect } from 'react'
import svg from "./assets/logo.svg"
import "./index.css"
import TodoInput from './TodoInput'
import Todos from './Todos'
import TodoOptions from "./TodoOptions"
//需求:
//1.根据数据,动态的展示结构

//2.在输入框输入内容,点击按钮可以添加到todos列表中

//3.点x可以删掉当前的todo

//4.点击checkbox勾勾,当前的todo变成已完成状态

//5.options 展示全部 已完成 未完成

//6.数据的永久存储


// let data = [
//     {
//         id: 1,
//         content: "吃饭",
//         completed: true
//     },
//     {
//         id: 2,
//         content: "写代码",
//         completed: false
//     },
// ]

const Todolist = () => {

    //从localStorage中获取数据,然后传给hook作为初始值

    let data = localStorage.getItem('qf-todos') ?? '[]'
    //将json数据变成对象
    data = JSON.parse(data)
    //todos的数据
    let [todos, setTodos] = useState(data)
    //input组件提升的状态
    let [content, setContent] = useState("")
    //声明3个按钮切换的状态
    let [option, setOption] = useState('all')
    //option有3个字段分别是 all(全部) active(未完成) completed(已完成)
    //一个方法,用于将输入的内容添加到todos数组中
    const handleAdd = () => {

        //非空验证
        //如果content是一个空字符串,就不能往下面添加了
        if (!content) {
            //return 代码在这里就结束了 后面不会执行了
            return
        }
        // console.log(content)
        //需要将content组合成一个对象,添加到todos这个数组中
        //编程思维和vue不一样了
        //需要给hook传递一个新的数组
        let todo = {
            //随机生成id
            id: Math.random().toString(32).substring(2),
            content,
            completed: false
        }

        setTodos([todo, ...todos])

    }

    //删除数据
    const handleDelete = (id) => {
        // console.log(id)
        //根据数据的id,到todos里面进行过滤
        //filter的表达式 返回数据中id不等于当期传入id的选项
        let newTodo = todos.filter(todo => todo.id !== id)
        // console.log(newTodo)
        setTodos(newTodo)
    }
    //勾选数据
    const changeTodoState = (id, checked) => {
        // console.log(id, checked)
        //去data数据中,找到id对应的数据,将completed属性赋值为传递过来的checked属性,这是个布尔值
        let target = todos.find(todo => todo.id === id)
        // console.log(target)
        target.completed = checked
        //这一步的目的是为了重新触发组件的render,让视图更新
        setTodos([...todos])
    }
    //点击Options组件点击不同按钮的时候,触发的函数
    const handleOptionChange = (option) => {
        setOption(option)
    }
    //点击底部按钮筛选不同的数据
    let newTodos = useMemo(() => {
        console.log(option)
        console.log(todos)
        //根据不同的option返回不同的结果
        if (option === 'all') {
            return [...todos]
        } else if (option === 'completed') {
            //过滤todos,返回completed为true的数据
            return todos.filter(todo => todo.completed)
        } else if (option === "active") {
            //过滤todos,返回completed为false的数据
            return todos.filter(todo => !todo.completed)
        }
    }, [todos, option])

    //计算已完成的数量和未完成的数量
    let completedCount = useMemo(() => {
        return (todos.filter(todo => todo.completed)).length
    }, [todos])
    //未完成的数量
    let activeCount = useMemo(() => {
        return (todos.filter(todo => !todo.completed)).length
    }, [todos])
    //负效应Hook,用于设置todos数据
    useEffect(() => {
        localStorage.setItem('qf-todos', JSON.stringify(todos))
    }, [todos])
    return (
        <div className='container'>
            <div className="heading">
                <div className="img-wrapper">
                    <img src={svg} height={80} alt="" />
                </div>
                <div className="title">
                    To-Do List
                </div>
            </div>
            {/* 输入组件 */}
            <TodoInput setContent={setContent} add={handleAdd} />
            {/* 展示组件 */}
            <Todos onCheck={changeTodoState} todos={newTodos} del={handleDelete} />

            <TodoOptions aCount={activeCount} cCount={completedCount} onOptionChange={handleOptionChange} todos={todos} />
        </div>
    )
}

export default Todolist